<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>173_175购物车案例</title>
  <style>
    li {
      float: left;
    }

    ul {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <h1>173_175购物车案例</h1>
  <div class="card">
    <ul id="goods"></ul>
    <p class="total"></p>
  </div>
  <script>
    const goodsList = [
      {
        id: '001',
        name: '电饭煲',
        price: 289.9,
        count: 2,
        spce: {
          color: '白色'
        },
        url: './image/电饭煲.png'
      },
      {
        id: '002',
        name: '电饭煲',
        price: 109.8,
        count: 3,
        spce: {
          size: '40cm*40cm',
          color: '黑色'
        },
        url: './image/电饭煲.png'
      },
      {
        id: '003',
        name: '电饭煲',
        price: 488,
        count: 1,
        spce: {
          size: '一大四小',
          color: '青色'
        },
        url: './image/电饭煲.png'
      },
      {
        id: '004',
        name: '电饭煲',
        price: 139,
        count: 1,
        spce: {
          size: '小号',
          color: '紫色'
        },
        url: './image/电饭煲.png',
        gift: '50g茶叶,清洗球'
      }
    ]
    let htmlContext = goodsList.map(item => {
      const { name, price, count, spce, url, gift } = item
      let desc = Object.values(spce).join('/')
      let liwu = gift ? gift.split(',').map(item => {
        return `<span class="tag">【赠品】${item}</span><br>`
      }).join('') : ''
      return `
        <li>
          <img src="${url}">
          <p>${name}</p>
          <div class="cate">
            <span>${desc}</span>
          </div>
          <p>${price.toFixed(2)}</p>
          <p>${count}</p>
          <p>${(price * count).toFixed(2)}</p>
          ${liwu}
        </li>
      `
    })
    console.log(htmlContext)
    let oUl = document.querySelector('#goods')
    let p = document.querySelector('.total')
    oUl.innerHTML = htmlContext
    p.innerHTML = goodsList.reduce((a, c) => {
      const { price, count } = c
      return (price * count) + a
    }, 0).toFixed(2)
  </script>
</body>

</html>